import React, { useEffect, useState } from 'react'
import { Descriptions, Button } from 'antd'
import { useParams } from 'react-router-dom'
import moment from 'moment'
import { useNavigate } from 'react-router'
import { getNewsInfoApi } from '@/api/news'

function NewsPreview() {
  const navigate = useNavigate()
  const [newsInfo, setNewsInfo] = useState(null)
  const params = useParams()

  useEffect(() => {
    getNewsInfo()
  }, [params])

  // 获取信息详情
  const getNewsInfo = () => {
    getNewsInfoApi(params.id).then(res => {
      setNewsInfo(res)
    })
  }

  const auditList = ['未审核', '审核中', '已通过', '未通过']
  const publishList = ['未发布', '待发布', '已上线', '已下线']
  const colors = ['black', 'orange', 'green', 'red']
  return (
    <div>
      <Descriptions
        extra={<Button onClick={() => navigate(-1)} type="primary">返回</Button>}
        title={newsInfo?.title}
      >
        <Descriptions.Item label="创建者">{newsInfo?.author}</Descriptions.Item>
        <Descriptions.Item label="创建时间">{moment(newsInfo?.createTime).format('YYYY/MM/DD HH:mm:ss')}</Descriptions.Item>
        <Descriptions.Item label="发布时间">{newsInfo?.publishTime ? moment(newsInfo?.createTime).format('YYYY/MM/DD HH:mm:ss') : '-'}</Descriptions.Item>
        <Descriptions.Item label="区域">{newsInfo?.region}</Descriptions.Item>
        <Descriptions.Item label="审核状态">
          <span style={{ color: colors[newsInfo?.auditState] }}>
            {auditList[newsInfo?.auditState]}
          </span>
        </Descriptions.Item>
        <Descriptions.Item label="发布状态">
          <span style={{ color: colors[newsInfo?.publishState] }}>
            {publishList[newsInfo?.publishState]}
          </span>
        </Descriptions.Item>
        <Descriptions.Item label="访问数量">{newsInfo?.view}</Descriptions.Item>
        <Descriptions.Item label="点赞数量">{newsInfo?.star}</Descriptions.Item>
        <Descriptions.Item label="评论数量">0</Descriptions.Item>
      </Descriptions>

      <div dangerouslySetInnerHTML={{
        __html: newsInfo?.content
      }} style={{
        border: '1px solid gray'
      }}>
      </div>
    </div>
  )
}

export default NewsPreview